<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>

<script src="lib/three.js"></script>
<script src="lib/OrbitControls.js"></script>

<script src="lib/gl-matrix.js"></script>
<script src="lib/pako.js"></script>
<script src="dist/LOLLoader.js"></script>


<body oncontextmenu=self.event.returnValue=false onselectstart="return false">

</body>

<script>
    let camera, scene, renderer, ctrl, fps;
    let heroModel = {};

    init();
    animate();

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    const times = []; // 存储当前的时间数组
    function refreshLoop() {
        window.requestAnimationFrame(() => {
            const now = performance.now(); // 使用performance.now()能获取更高的精度
            while (times.length > 0 && times[0] <= now - 1000) {
                times.shift(); // 去掉1秒外的时间
            }
            times.push(now);
            fps = times.length;
            refreshLoop();
        });
    }
    refreshLoop();

    function animate() {
        requestAnimationFrame( animate );

        heroModel.fps = fps;
        renderer.render( scene, camera );
    }


    function init() {
        // 创建场景，所有的对象 相机 光源等对象都将放在这个场景上
        scene = new THREE.Scene();

        let url = ['./model/gailun/86_0.lanim', './model/gailun/86_0.lmesh', './model/gailun/garen_base_tx_cm.png'];
        let lolLoader = new LOLLoader();
        lolLoader.load(url).then((model) => {
            heroModel = model;
            heroModel.playAnimation('attack2');
            let mesh = model.mesh;
            mesh.scale.set(0.01,0.01,0.01);
            scene.add(mesh);
        });

        // 创建一个相机，它决定我们的视角
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.x = 3;
        camera.position.y = 3;
        camera.position.z = 3;

        ctrl = new THREE.OrbitControls(camera);

        // 创建一个渲染器并设置宽高
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        renderer.setPixelRatio( window.devicePixelRatio );
        document.body.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );

        let dlight = new THREE.DirectionalLight( 0xFFFFFF, 1 );
        dlight.position.set( 10, -10, 10 );
        dlight.target.position.set(0,0,0);
        scene.add( dlight );

        let alight = new THREE.AmbientLight( 0x404040 );
        scene.add( alight );

    }

</script>

</html>